<template>
  <!-- 修改密码。
输入用户（用户名或手机号）和密码，执行find，找到了就证明用户名和密码是对的。
再执行updateMany，改变旧密码 -->
  <!-- 三个框：用户、旧密码、新密码 -->

  <div class="lgbox changepass">
    <!-- <video :src="videoSrc" class="myvideo" autoplay muted loop></video> -->
    <div class="login-box">
      <h2 class="title">欢迎修改密码</h2>
      <div class="box">
        <!-- model:表单数据对象。status-icon：是否在输入框中显示校验结果反馈图标 。rules：表单验证规则。label-width：标签的长度 -->
        <el-form
          ref="myForm"
          :model="form"
          status-icon
          :rules="rules"
          label-width="120px"
          class="myform"
        >
          <!-- label:标签文本，prop：model的键名 -->
          <el-form-item label="用户名" prop="account">
            <!-- 可能是用户名页可能是密码 -->
            <!-- prefix-icon	自定义前缀图标。autocomplete：根据之前的输入来自动完成 -->
            <el-input
              :prefix-icon="User"
              v-model="form.account"
              placeholder="用户名"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="旧密码" prop="oldpass">
            <el-input
              :prefix-icon="Lock"
              v-model="form.oldpass"
              placeholder="登录密码"
              show-password
              type="password"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="新密码" prop="newpass">
            <el-input
              :prefix-icon="Lock"
              v-model="form.newpass"
              placeholder="确认密码"
              show-password
              type="password"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item class="lastitem">
            <div class="alinks">
              <router-link to="/login" class="litem">去登录</router-link>
              <router-link to="/findpass" class="litem bg"
                >忘记密码</router-link
              >
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="btnblock"
              @click="submitData(myForm)"
              >修改密码</el-button
            >
            <el-button type="danger" class="btnblock" @click="resetForm(myForm)"
              >重置数据</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { reg } from "@/utils/validate";
import { ElMessage } from "element-plus";
import { Ajax } from "@/api";
import { useRouter } from "vue-router";
const router = useRouter();

const myForm = ref<FormInstance>(); // ref 对象
const form = reactive({
  // 表单的数据
  account: "",
  // 要做一个新旧密码不一致的校验
  oldpass: "",
  newpass: "",
});

const checknewpass = (rule: any, value: any, callback: any) => {
  if (value == form.oldpass) {
    callback(new Error("新旧密码不能一致!"));
  } else {
    callback();
  }
};
const checkoldpass = (rule: any, value: any, callback: any) => {
  if (reg.pwd.test(form.newpass)) {
    myForm.value.validateField("newpass", () => {
      callback();
    }); // 唤起 dbpass 的密码正则
  } else {
    callback();
  }
};

const rules = reactive<FormRules>({
  account: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  newpass: [
    {
      required: true,
      message: "请输入新密码",
      trigger: "blur",
    },
    {
      pattern: reg.pwd,
      message: "请输入6-16位的数字和字母组合的新密码",
      trigger: "blur",
    },
    {
      validator: checknewpass,
      trigger: "blur",
    },
  ],
  oldpass: [
    {
      required: true,
      message: "请输入旧密码", //新旧密码需要不一致
      trigger: "blur",
    },
    {
      pattern: reg.pwd,
      message: "请输入6-16位的数字和字母组合的旧密码",
      trigger: "blur",
    },
    {
      validator: checkoldpass,
      trigger: "blur",
    },
  ],
});
// 重置表单
const resetForm = (myForm: FormInstance | undefined) => {
  if (!myForm) return;
  myForm.resetFields();
};

// 修改密码
const submitData = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate( async (valid) => {//表单通过校验
        // console.log(valid)
        if (valid) {
            console.log('submit!')
            let res = await Ajax.changepass(form)
            if(res.code==200){
                router.push({name:'login', query:form})
            }
        } else {
            console.log('error submit!')
            ElMessage.error('修改密码校验失败!')
            
        }
    })
}
</script>

<style></style>
